<template>
  <div style="width: 100%; height: 100%;" class="flex-y w_box">
    <div id="p1" class="w100 h-full svg_contnet" style="flex: 1;">
      <svg
        ref="mysvg"
        id="s1"
        width="100%"
        height="100%"
        viewBox="0 0 1682.4 560"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <image
          object-fit="cover"
          preserveAspectRatio="none meet"
          width="100%"
          id="svg_2"
          xlink:href="@/assets/device/p800.png"
          x="0"
          y="-200"
        />
        <g
          @mouseenter="mouseenterItem(item)"
          v-for="(item, index) in newList"
          :key="index"
          id="myGroup"
          :transform="`translate(${item.x || -100},${item.y || -100})`"
        >
          >
          <filter id="glow">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <text
            :fill="rendererColor(item.deviceStatus)"
            font-size="24"
            id="svg_112"
            text-anchor="middle"
            stroke="#fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            xml:space="preserve"
            x="0"
            y="5"
          >
            <tspan>{{ item.name }}</tspan>
          </text>
          <rect
            x="-79"
            y="-18"
            width="160"
            height="30"
            rx="3"
            ry="3"
            :fill="rendererColor(item.deviceStatus, 0.2)"
            :stroke="rendererColor(item.deviceStatus)"
            stroke-width="1"
            filter="url(#glow)"
            opacity="1"
          />

          <circle
            :class="item.deviceStatus == '101' ? 'loading-circle-1' : ''"
            cx="0"
            cy="20"
            r="6"
            :stroke="rendererColor(item.deviceStatus)"
            :fill="rendererColor(item.deviceStatus)"
          />
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="415.59998"
            x2="294.59998"
            y1="-11"
            y2="-12"
          />
          <image
            preserveAspectRatio="none"
            height="290.00001"
            id="svg_118"
            width="288"
            x="2.59998"
            y="-96"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="100.59998"
            y="-40"
          >
            淬火炉(右)
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="80.59998"
            y="-10"
          >
            氧气:{{ area123.chlRightO2 ? area123.chlRightO2 : "0" }} mV
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="75.59998"
            y="10"
          >
            实际Cp:{{ area123.chlRightCp ? area123.chlRightCp : "0" }}
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="75.59998"
            y="30"
          >
            设定Cp:{{ area123.chlRightCpSet ? area123.chlRightCpSet : "0" }}
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="100.59998"
            y="50"
          >
            实际温度:{{
              area123.chlRightRealTemp ? area123.chlRightRealTemp : "0"
            }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="100.59998"
            y="70"
          >
            设定温度:{{
              area123.chlRightSetTemp ? area123.chlRightSetTemp : "0"
            }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="110.59998"
            y="90"
          >
            CH3OH流量:{{
              area123.chlRightCH30HFlow ? area123.chlRightCH30HFlow : "0"
            }}
            l/h
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="115.59998"
            y="110"
          >
            C3H8流量:{{
              area123.chlRightC3H8Flow ? area123.chlRightC3H8Flow : "0"
            }}
            l/min
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="105.59998"
            y="130"
          >
            O2流量:{{ area123.chlRightO2Flow ? area123.chlRightO2Flow : "0" }}
            l/min
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="110.59998"
            y="150"
          >
            NH3流量:{{
              area123.chlRightNH3Flow ? area123.chlRightNH3Flow : "0"
            }}
            l/min
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="510.59998"
            x2="390.59998"
            y1="121"
            y2="200"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="120"
            y="180"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="195"
            y="240"
          >
            淬火油槽
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="210"
            y="270"
          >
            实际温度:{{ area123.shycRealTemp ? area123.shycRealTemp : "0" }} ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="210"
            y="300"
          >
            设定温度:{{ area123.shycSetTemp ? area123.shycSetTemp : "0" }} ℃
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="560.59998"
            x2="420.59998"
            y1="180"
            y2="360"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="180"
            y="340"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="240"
            y="400"
          >
            气冷槽
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="265"
            y="430"
          >
            实际温度:{{ area123.qlcRealTemp ? area123.qlcRealTemp : "0" }} ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="265"
            y="460"
          >
            设定温度:{{ area123.qlccSetTemp ? area123.qlccSetTemp : "0" }} ℃
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="610.59998"
            x2="400.59998"
            y1="250"
            y2="600"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="120"
            y="500"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="165"
            y="550"
          >
            水槽
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="205"
            y="580"
          >
            实际温度:{{ area123.slscRealTemp ? area123.slscRealTemp : "0" }} ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="205"
            y="610"
          >
            设定温度:{{ area123.slscSetTemp ? area123.slscSetTemp : "0" }} ℃
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="780.59998"
            x2="680.59998"
            y1="270"
            y2="500"
          />
          <image
            preserveAspectRatio="none"
            height="290.00001"
            id="svg_118"
            width="288"
            x="490"
            y="480"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="580"
            y="545"
          >
            淬火炉(左)
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="560.59998"
            y="575"
          >
            氧气:{{ area123.chlLeftO2 ? area123.chlLeftO2 : "0" }} mV
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="555.59998"
            y="595"
          >
            实际Cp:{{ area123.chlLeftCp ? area123.chlLeftCp : "0" }}
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="555.59998"
            y="615"
          >
            设定Cp:{{ area123.chlLeftCpSet ? area123.chlLeftCpSet : "0" }}
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="580.59998"
            y="635"
          >
            实际温度:{{
              area123.chlLeftRealTemp ? area123.chlLeftRealTemp : "0"
            }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="580.59998"
            y="655"
          >
            设定温度:{{ area123.chlLeftSetTemp ? area123.chlLeftSetTemp : "0" }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="590.59998"
            y="675"
          >
            CH3OH流量:{{
              area123.chlLeftCH30HFlow ? area123.chlLeftCH30HFlow : "0"
            }}
            l/h
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="595.59998"
            y="695"
          >
            C3H8流量:{{
              area123.chlLeftC3H8Flow ? area123.chlLeftC3H8Flow : "0"
            }}
            l/min
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="585.59998"
            y="715"
          >
            O2流量:{{ area123.chlLeftO2Flow ? area123.chlLeftO2Flow : "0" }}
            l/min
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="590.59998"
            y="735"
          >
            NH3流量:{{ area123.chlLeftNH3Flow ? area123.chlLeftNH3Flow : "0" }}
            l/min
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="900.59998"
            x2="840.59998"
            y1="-100"
            y2="-100"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="900"
            y="-200"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1000"
            y="-150"
          >
            高温回火炉(左)
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="980"
            y="-110"
          >
            实际温度:{{
              area123.gwhhlLeftRealTemp ? area123.gwhhlLeftRealTemp : "0"
            }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="980"
            y="-80"
          >
            设定温度:{{
              area123.gwhhlLeftSetTemp ? area123.gwhhlLeftSetTemp : "0"
            }}
            ℃
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="1200"
            x2="930"
            y1="0"
            y2="30"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="1200"
            y="-70"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1270"
            y="-20"
          >
            油清洗机
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1285"
            y="10"
          >
            实际温度:{{ area123.yqxjRealTemp ? area123.yqxjRealTemp : "0" }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1285"
            y="40"
          >
            设定温度:{{ area123.yqxjSetTemp ? area123.yqxjSetTemp : "0" }}
            ℃
          </text>
        </g>
        <g>
          <line
            fill="none"
            id="svg_103"
            stroke="#00ff00"
            stroke-dasharray="5,5"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="3"
            x1="1300.59998"
            x2="1190.59998"
            y1="180"
            y2="135"
          />
          <image
            preserveAspectRatio="none"
            height="170.00001"
            id="svg_118"
            width="288"
            x="1300"
            y="100"
            xlink:href="@/assets/device/xinxikuang.png"
          />
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="25"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1410"
            y="150"
          >
            高温回火炉(右)
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1390"
            y="190"
          >
            实际温度:{{
              area123.gwhhlRightRealTemp ? area123.gwhhlRightRealTemp : "0"
            }}
            ℃
          </text>
          <text
            fill="#07DCF5"
            font-family="serif"
            font-size="20"
            id="svg_222"
            opacity="0.75"
            stroke="#007fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            text-anchor="middle"
            xml:space="preserve"
            x="1390"
            y="220"
          >
            设定温度:{{
              area123.gwhhlRightSetTemp ? area123.gwhhlRightSetTemp : "0"
            }}
            ℃
          </text>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mixinReszie } from "@/mixin/resize.js";
import { generateId } from "@/utils";
import {
  DEVICE_LIST,
  DEVICE_STATE,
  NO_ANIME_TYPE,
  CENTRALIZED_TIME
} from "./constant";
import { hex2Rgba } from "@/utils/utils";
import initMqtt from "@/views/common/js/device/mqttUtils.js";
import SpotPoint from "@/components/SpotPoint";
import _ from "lodash";
export default {
  components: {
    SpotPoint
  },
  props: {
    resultArray: {
      type: Array,
      default: () => []
    }
  },
  mixins: [mixinReszie],
  computed: {
    ...mapGetters(["area123"]),
    newList() {
      return DEVICE_LIST.filter(item => {
        return !this.legendVal.includes(Number(item.deviceStatus));
      });
    },
    getTspan() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        // firstRealTemp secondRealTemp thirdRealTemp
        switch (count) {
          case 1:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "6"
              }
            ];
          case 2:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "-10"
              },
              {
                key: "secondRealTemp",
                x: "-2",
                y: "6"
              }
            ];
          case 3:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "-25"
              },
              {
                key: "secondRealTemp",
                x: "0",
                y: "-10"
              },
              {
                key: "thirdRealTemp",
                x: "-2",
                y: "6"
              }
            ];

          default:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "6"
              }
            ];
        }
      };
    },
    // 获取矩形偏移
    getRectY() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return -10;
          case 2:
            return -26;
          case 3:
            return -40;

          default:
            return -10;
        }
      };
    },
    // 获取矩形高度
    getRectHeight() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return 20;
          case 2:
            return 36;
          case 3:
            return 50;

          default:
            return 20;
        }
      };
    },
    rendererColor() {
      return function(status, alpha = 1) {
        const color =
          !status || this.area123[status] > 0 ? "#52C41A" : "#929292";
        return hex2Rgba(color, alpha);
      };
    },
    screenWidth() {
      return window.screen.width >= 1920;
    }
  },
  data() {
    return {
      legendVal: [],
      legendList: DEVICE_STATE,
      row: {},
      option: {},

      point: [],
      config1: {
        number: [0]
        // content: "{nt}个",
      },
      loading: false,
      brder1Key: generateId(),
      legendData: [],
      DEVICE_LIST: DEVICE_LIST
    };
  },
  watch: {},
  async mounted() {},

  methods: {
    handleLegend(row) {
      const index = this.legendVal.findIndex(item => item == row.value);
      if (index == -1) {
        this.legendVal.push(row.value);
      } else {
        this.legendVal.splice(index, 1);
      }
    },
    mouseenterItem(row) {
      this.row = _.cloneDeep(row);
    },
    cursorPoint(evt, svg) {
      let pt = svg.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      return pt.matrixTransform(svg.getScreenCTM().inverse());
    },
    handleClick(evt) {
      let mysvg = this.$refs.mysvg;
      let pt = this.cursorPoint(evt, mysvg);
      const x = parseInt(pt.x);
      const y = parseInt(pt.y) - 20;
      console.log(`,x:${x},y:${y}`);
    }
  }
};
</script>
<style lang="scss">
.vue-tooltip.tooltip-custom {
  /* 这里进行父元素样式更改 */
  background-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-arrow {
  /* 下方的小三角形 */
  border-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-content {
  /* 矩形内容区域 */
  color: #333;
  padding: 6px 0;
  .tool_item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.svg_contnet {
  position: relative;
  .legend_list {
    position: absolute;
    left: 50px;
    top: 50px;
    .legend_item {
      cursor: pointer;
      margin-bottom: 10px;
      .legend_dot {
        margin-right: 6px;
        width: 30px;
        height: 14px;
        border-radius: 4px;
      }
    }
  }
}
.w_box {
  overflow-y: hidden !important;
}
@keyframes morph {
  0% {
    stroke-width: 10;
    stroke-opacity: 0.1;
  }

  25% {
    stroke-width: 30;
    stroke-opacity: 0.3;
  }

  50% {
    stroke-width: 10;
    stroke-opacity: 0.5;
  }

  75% {
    stroke-width: 10;
    stroke-opacity: 0.3;
  }

  100% {
    stroke-width: 10;
    stroke-opacity: 0;
  }
}

.loading-circle-1 {
  -webkit-animation: morph 2s ease infinite;
  animation: morph 2s ease infinite;
}
</style>
